import { Avatar, Button, List, Skeleton, Space } from "antd";
import React, { useEffect, useState } from "react";
import { NavLink, Link } from "react-router-dom";
import { formatObjectToQs } from "@/utils/common";
import AppMainStatics from "./AppMainStatics";
const count = 10;
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`;
const AppMain = () => {
  const [initLoading, setInitLoading] = useState(true);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [list, setList] = useState([]);
  useEffect(() => {
    fetch(fakeDataUrl)
      .then((res) => res.json())
      .then((res) => {
        setInitLoading(false);
        setData(res.results);
        setList(res.results);
        console.log("回传的数据", res);
      });
  }, []);
  const onLoadMore = () => {
    setLoading(true);
    setList(
      data.concat(
        [...new Array(count)].map(() => ({
          loading: true,
          name: {},
          picture: {},
        }))
      )
    );
    fetch(fakeDataUrl)
      .then((res) => res.json())
      .then((res) => {
        const newData = data.concat(res.results);
        setData(newData);
        setList(newData);
        setLoading(false);
        // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
        // In real scene, you can using public method of react-virtualized:
        // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
        window.dispatchEvent(new Event("resize"));
      });
  };
  const loadMore =
    !initLoading && !loading ? (
      <div
        style={{
          textAlign: "center",
          marginTop: 12,
          height: 32,
          lineHeight: "32px",
        }}
      >
        <Button onClick={onLoadMore}>loading more</Button>
      </div>
    ) : null;
  return (
    <div id="contentClass">
      <AppMainStatics />
      <Space>
        <NavLink activeClassName="abc" to="/">
          Main
        </NavLink>
        <NavLink to="/pro-list">pro-list</NavLink>
        {/* 还可以replacce 但是不会做记录 */}
        {/* NavLink可以通过加active 给匹配当前路由实现一些特殊的样式 activeClassName */}

        <NavLink to={{ pathname: "/pro-filter", search: "dawdawdawd" }} replace>
          pro-filter
        </NavLink>
        <NavLink to="/dawdawd">404页面</NavLink>
        <NavLink activeClassName="abc" to="/detail-example/01">
          详情示例页
        </NavLink>
      </Space>
      <List
        className="demo-loadmore-list"
        loading={initLoading}
        itemLayout="horizontal"
        loadMore={loadMore}
        dataSource={list}
        renderItem={(item, i) => (
          <List.Item
            actions={[
              <a key="list-loadmore-edit">编辑</a>,
              <a key="list-loadmore-more">详情</a>,
            ]}
          >
            <Skeleton avatar title={false} loading={item.loading} active>
              <List.Item.Meta
                avatar={<Avatar src={item.picture.large} />}
                title={<a href={`/detail-example/${i}`}>{item.name?.last}</a>}
                description={item.email}
              />
              <List.Item.Meta />
              <Link
                to={{
                  pathname: `/detail-example/${i}`,
                  search: formatObjectToQs({
                    gender: item.gender,
                    email: item.email,
                  }),
                }}
              >
                邮箱:{item.email}
              </Link>
              <div>
                性别:{item.gender === "male" ? "男" : "女"} 邮箱:{item.email}
              </div>
            </Skeleton>
          </List.Item>
        )}
      />
    </div>
  );
};
export default AppMain;
